<script lang="ts">
	import BgImage from '$lib/BgImage.svelte';
	import { buildCustomerCaseLinksAtSolutionPage } from '$store/customerCaselinks';
	export let product: string;

	$: showCustomerCaseLinks = buildCustomerCaseLinksAtSolutionPage(product)
</script>

<ul class="grid grid-cols-7 gap-1">
	{#each $showCustomerCaseLinks as item}
		<li class="w-[121.4px] h-[121.4px] ">
			<BgImage imgSrc={item.logo} alt={item.title} classes="h-full" bgColorClass="">
        <div class="flex justify-center items-center h-full rounded-[60.7px] bg-[#F4F4F4] border-solid border border-[#E5E5E5]" >
        </div>
				<div class="mt-4 text-center text-[14px]">{item.title}</div>
			</BgImage>
		</li>
	{/each}
</ul>
